前面介紹了 display 的佈局方式，以及各式各樣的 box，這邊來介紹 Box model 的組成。

Box model

前面文章有提到，每個元素都會都會產生一個 box，而 CSS 確定了 box 的 size, position, and properties (color, background, border size, etc.)，而 box model 也決定 CSS 佈局的排版方式。

box model 由四個部分組成

• content (內容區)
• padding (內距)
• border (邊框)
• margin (外距)

從 Chrome 開發者工具來看，透過觀察元素的 Computed 可以看得出每個元素的 box model。

每個不同的區域周圍都稱為 edge 邊緣，每條 edge 可以分為 top、right、bottom、left。

因此可以理解為每個 box 都有四個 edge，每個 edge 由四個邊（top、right、bottom、left）而組成。

content

簡單來說就是代表了元素的內容（例如：文字、圖片）或該子元素的 box。

Tips

• content 大小通常取決於元素本身內容或子層區塊大小。
• contetn edge 的四個邊共同定義了 box 的 content box（內容框）。

padding

padding 推擠出 content 和 border 之間的距離。

由 padding edge 的四個邊（padding-top、padding-right、padding-bottom、padding-left）共同定義了 padding box（包含了 content 和 padding areas）。

Tips

• 不能為負值。
• box-sizing 預設值為 content-box，因此預設 padding 不包含在元素的寬高內。
• 當 padding 值為 0，代表 padding edge 與 content edge 重疊，則兩者大小相同。

border

介於 margin 與 padding 之間的範圍，常用於推擠元素和父層的距離。

由 border edge 的四個邊共同定義了 border box （包含了 content、padding 和 border）。

Tips

• 預設情況下，不包含在 width 與 height 的範圍內。
• 當 border 值為 0，代表 border edge 與 padding edge 重疊，則兩者大小相同。

margin

圍繞在 border 之外，常用於推擠相鄰元素彼此之間的距離。

由 margin edge 的四個邊共同定義了 margin box，並包含了全部 box 的內容（content、padding、border 和 margin）。

Tips

• margin 始終都是透明的，即使是 background 樣式也不會影響到 margin。
• 可以是正值或負值，負值會使其和其它元素產生重疊。
• 相鄰的元素當都有設置上下 margin 時，會產生 Mastering margin collapsing。
• 對於 non-replaced inline elements，佔用的空間會由 line-hieght 來決定，即使設置了 border、padding 皆不受影響。
• 當 margin 值為 0，代表 margin edge 與 border edge 重疊，則兩者大小相同。

reference

• MDN-Introduction to the CSS basic box model
• W3C-The CSS Box Model